﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/base.2.1.0.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/base.js"></script>

    <style type="text/css">
        html, body { height: auto; }
        html { font-size: 62.75%; }
        html > body { font-size: 1.2rem; }
        body { background-color: #FFF; }
        .container, .container-fluid { background-color: transparent; }
        .max2-img { width: 100%; display: inline-block; vertical-align: middle; }

        .ggl-wrapper { position: relative; height: 135px; width: 280px; margin: 0 auto; margin-top: 20px; }
        .ggl-box { width: 280px; height: 135px; overflow: hidden; }
        .ggl-box .ggl-t1 { }
        .ggl-wrapper .ggl-label-text { display: none; position: absolute; top: 0; left: 0; height: 135px; width: 100%; box-sizing: border-box; z-index: -1; background: #fdc800 url(/images/special1/globle1111/ggl-t2.jpg) no-repeat 50% 50%; background-size: 100%; }
        .ggl-wrapper .ggl-label-text > label { font: bold 3.6rem/135px verdana; display: block; height: 100%; box-sizing: border-box; color: #000; text-align: center; }

        div#rect { width: 100%; background: #f00; }

        #navigation { background: #fdc800; color: #FFF; height: 45px; line-height: 45px; text-align: center; font-size: 18px; }
        .fixed { position: fixed; top: 0; left: 0; z-index: 100; }
        #move { position: fixed; bottom: 0px; background: #F5F5F5; height: 30px; line-height: 30px; text-align: center; font-size: 1rem; width: 100%; z-index: 10; }

        .rows { display: flex; }
        .rows .row3 { display: flex; width: 30%; border: 2px solid #DDD; height: 60px; margin-left: 5%; border-radius: 3px; }
        .rows .row3:first-child { margin-left: 0; }
        .rows .row3:active { border-color: #ffd800; }

        .m-rows { display: -webkit-box; }
        .m-rows .m-row { -webkit-box-flex: 1; background: #0a4867; padding: 5px; color: #FFF; }
        .m-rows .m-row-custom { background: #01fb16; }

        .pro-item { background: #eee; max-width: 640px; margin: 0 auto; }
        .pro-list { float: left; padding-left: 2px; width: 50%; padding-bottom: 4px; transition: all .5s ease-in-out; }
        .pro-list:nth-child(2n+1) { padding-left: 0; padding-right: 2px; }
        .pro-list .pro-info { background: #FFF; }
        .pro-info .pro-title { padding: 5px; height: 3.85rem; font-size: 1.4rem; color: #252525; line-height: 1.6rem; padding-top: .5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .pro-info .pro-price { padding: 5px; padding-top: .75rem; font-size: 1.6rem; color: #e93225; }

        .pro-list.list { float: none !important; width: 100%; padding-left: 0px; padding-right: 0px; }
        .pro-list.list > a { display: flexbox; display: -webkit-box; }

        .pro-list.list .pro-img > img { width: 145px; height: 97px; }
        .pro-list.list .pro-info { -webkit-box-flex: 1; flex: 1; }

        .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid rgba(0, 0, 0, 0); white-space: nowrap; padding: 6px 16px; font-size: 13px; line-height: 1.846; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        .btn { text-transform: uppercase; border-right: none; border-bottom: none; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3); box-shadow: 1px 1px 2px rgba(0,0,0,.3); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }

        .btn-primary { background-size: 200%; background-position: 50%; }
        .btn-primary:active { background-color: #0d87e9; background-image: -webkit-radial-gradient(circle, #0d87e9 10%, #2196f3 11%); background-repeat: no-repeat; background-size: 1000%; box-shadow: 2px 2px 2px rgba(0,0,0,0.3); color: #FFF; }

        #img { transition: all .5s ease-in-out; max-width: 300px; }
        #img.hover { max-width: 100%; }

        .box-dashed { position: relative; height: 100px; overflow: hidden; }
        .box-dashed > div { position: absolute; width: 200%; border: 1px dashed #333; z-index: 1; }
        .box-dashed > div.t-b { top: 0; transform: translate(-50%); animation: myfirst1 10s linear .1s infinite normal; }
        .box-dashed > div.r-b { right: -1px; transform: rotate(90deg); animation: myfirst2 10s linear .1s infinite normal; }
        .box-dashed > div.b-b { bottom: 0; transform: translate(0%); animation: myfirst3 10s linear .1s infinite normal; left: auto; right: -100%; }
        .box-dashed > div.l-b { left: -1px; transform: rotate(270deg); animation: myfirst4 10s linear .1s infinite normal; }

        @keyframes myfirst1 {
            0% { left: 0px; }
            100% { left: 500px; }
        }

        @keyframes myfirst2 {
            0% { bottom: 0px; }
            100% { bottom: 500px; }
        }

        @keyframes myfirst3 {
            0% { right: -500px; }
            100% { right: 0; }
        }

        @keyframes myfirst4 {
            0% { top: 0px; }
            100% { top: 500px; }
        }


        .track-list::-webkit-scrollbar { width: 7px; height: 9px; }
        .track-list::-webkit-scrollbar-button:end:increment, .track-list::-webkit-scrollbar-button:start:decrement { display: block; height: 0; background-color: transparent; }
        .track-list::-webkit-scrollbar-track-piece { -webkit-border-radius: 0; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; background: #ebebeb; }
        .track-list::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: rgba(0,0,0,.2); -webkit-border-radius: 4px; }
        .track-list::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: rgba(0,0,0,.2); -webkit-border-radius: 4px; }

        .track-list { scrollbar-face-color: #c7c7c7; scrollbar-highlight-color: #c7c7c7; scrollbar-3dlight-color: #c7c7c7; scrollbar-darkshadow-color: #c7c7c7; scrollbar-Shadow-color: #c7c7c7; scrollbar-arrow-color: #c7c7c7; scrollbar-track-color: #ebebeb; }
        .track-list { margin: 20px; height: 100px; padding-left: 5px; overflow-y: auto; position: relative; }
        .track-list { -webkit-border-radius: 0; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; border: 1px solid #eee; }

        div.arr-right { width: 0px; height: 0px; border-bottom: 50px solid transparent; /* left arrow slant */ border-top: 50px solid transparent; /* right arrow slant */ border-left: 50px solid #2f2f2f; /* bottom, add background color here */ font-size: 0px; line-height: 0px; }


        .progress-ring { width: 86px; height: 86px; }
        .progress-ring-cnt { padding-bottom: .2rem; text-align: center; }
        .progress-ring-bg, .progress-ring-hover { fill: none; stroke: #ff9c05; stroke-width: 3px; }
        .progress-ring-hover { opacity: .8; stroke: #fff; stroke-width: 4px; }
        .progress-ring-hover-animation { -webkit-animation: hover 5s linear forwards; animation: hover 5s linear forwards; }
        .progress-ring-text { font-size: 20px; font-family: arial,sans-serif; fill: #999; text-anchor: middle; }

        @-webkit-keyframes hover {
            to { stroke-dashoffset: 0; }
        }

        @keyframes hover {
            to { stroke-dashoffset: 0; }
        }

        .midden-line { position: relative; }
        .midden-line:before { position: absolute; content: " "; border-top: 1px solid #ddd; top: 50%; margin-top: -0.5px; width: 100%; left: 0; transform: scaleY(.5); }
        .icons-arrow { position: relative; display: inline-block; width: 45px; height: 45px; border: 1px solid #ddd; }
        .icons-arrow.icons-arrow:before { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -7.5px; margin-left: -7.5px; display: inline-block; width: 15px; height: 15px; border: solid #333; border-width: 1px 0 0 1px; }
        .icons-arrow.icons-arrow-top:before { -webkit-transform: rotate(45deg); margin-top: -1.75px; }
        .icons-arrow.icons-arrow-down:before { -webkit-transform: rotate(-135deg); margin-top: -10.75px; }
        .icons-arrow.icons-arrow-left:before { -webkit-transform: rotate(-45deg); margin-left: -1.75px; }
        .icons-arrow.icons-arrow-right:before { -webkit-transform: rotate(135deg); margin-left: -10.75px; }
    </style>
</head>
<body>

    <div id="rect" style="padding:10px;background:#F5F5F5; width:80%;">测试</div>
    <div class="container text-center margin-30">
        <a href="###" class="btn btn-primary width-100 ">按钮</a>
    </div>
    <div class="container">简约FBLIFE印花图案长袖T恤 YMT-102A_越野e族服装_队服_赛车服装_越野衣族</div>
    <div id="move">ddd</div>
    <div class="container">
        <div class="rows">
            <div class="row3"></div>
            <div class="row3"></div>
            <div class="row3"></div>
        </div>
    </div>
    <div class="container" style="margin-top:15px;">
        <div class="m-rows">
            <div class="m-row-custom" style="width:120px;"></div>
            <div class="m-row">这是一个测试数据</div>
        </div>
    </div>
    <br />
    <div class="container">
        <!-- end .form-header section -->
        <form method="post" action="" id="contact">
            <div class="panel-body">
                <div class="col-sm-7 pr30">
                    <div class="section control">
                        <label class="field-label">账号</label>
                        <label for="username" class="field prepend-icon">
                            <input required name="username" autofocus id="username" type="text" placeholder="请输入用户名" maxlength="100" class="control-text" />
                        </label>
                    </div>
                    <!-- end section -->
                    <div class="section control">
                        <label class="field-label">密码</label>
                        <label for="password" class="field prepend-icon">
                            <input required id="password" name="password" type="password" placeholder="请输入密码" maxlength="100" autocomplete="off" class="control-text" />
                        </label>
                    </div>
                    <!-- end section -->
                </div>
            </div><br />
            <!-- end .form-body section -->
            <div class="panel-footer clearfix">
                <input type="submit" class="btn btn-primary" value="登录" />
            </div>
            <!-- end .form-footer section -->
        </form>
    </div>
    <br />
    <div class="container">
        <div><img src="http://oss.cubiauto.com/1460016108797710.jpg" id="img" /></div>
        <br>
        <a onclick="deskNotify()" class="btn">Notify me!</a>
    </div>
    <br>
    <div class="container">
        <a href="javascript:history.go(-1)" class="back">首页</a>
        <button onclick="stopback()">阻止</button>
        <button onclick="defaultback()">释放</button>
    </div>
    <br />
    <div class="container">
        <div class="box-dashed">
            <div class="t-b"></div>
            <div class="r-b"></div>
            <div class="l-b"></div>
            <div class="b-b"></div>
        </div>
    </div>
    <br />
    <div class="track-list">
        <div>
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
            感谢您的耐心等待，参加评价还能赢取京豆呦】<br />
        </div>
    </div>

    <br />
    <div class="arr-right"></div>
    <br />

    <div class="progress-ring-cnt"><svg class="progress-ring progress-ring-countdown" width="106" height="106" viewBox="0 0 106 106"><path class="progress-ring-bg" d="M 53 53m -50, 0a 50,50 0 1,1 100,0a 50,50 0 1,1 -100,0"></path><path class="progress-ring-hover progress-ring-hover-animation" d="M 53 53m -50, 0a 50,50 0 1,1 100,0a 50,50 0 1,1 -100,0" style="stroke-dasharray: 314px;stroke-dashoffset: 314px;transform: rotate(90deg);transform-origin: 53px 53px;"></path><text class="progress-ring-text" x="52" y="62">0秒</text></svg></div>
    <br />
    <div class="container midden-line">
        <i class="icons-arrow icons-arrow-top"></i>
        <i class="icons-arrow icons-arrow-down"></i>
        <i class="icons-arrow icons-arrow-left"></i>
        <i class="icons-arrow icons-arrow-right"></i>
    </div>
    <div>
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <div class="width-100 nav" id="navigation" style="">
            导航 <i class="icon-arrows icon-arrows-right"></i>
        </div>
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    <div class="clearfix" style="margin-bottom:10px; text-align:right;max-width:640px;margin:0 auto;">
        <label class="btn" onclick="Layout('grid')">Grid</label> &nbsp;
        <label class="btn" onclick="Layout('list')">List</label>
        <input type="hidden" id="layout" name="layout" value="grid" />
    </div>
    <div class="clearfix pro-item">
        <div class="pro-list">
            <a href="javascript:;">
                <div class="pro-img"><img src="images/2.jpg" class="max-img" /></div>
                <div class="pro-info">
                    <div class="pro-title">Apple iPhone 6s (A1700) 128G 金色 移动联通电信4G手机</div>
                    <div class="pro-price">￥<label>5988.00</label></div>
                </div>
            </a>
        </div>
        <div class="pro-list">
            <a href="javascript:;">
                <div class="pro-img"><img src="images/2.jpg" class="max-img" /></div>
                <div class="pro-info">
                    <div class="pro-title">Apple iPhone 6s (A1700) 128G 金色 移动联通电信4G手机</div>
                    <div class="pro-price">￥<label>5988.00</label></div>
                </div>
            </a>
        </div>
    </div>
    <script type="text/javascript">

        function login() {
            $.ajax({
                type: "post",
                //async:false,
                url: "http://m2.auto.life/actions/notifylogin",
                data:{userid:"13800138000"},
                dataType: "jsonp",
                jsonpCallback: "success_jsonpCallback",
                success: function (json) {
                    console.log(json);
                },
                error: function () {
                    alert('error');
                }
            });
        }

        function stopback() {
            $(".back").on('click', function (e) {
                e.preventDefault(); e.stopPropagation();
            });
        }
        function defaultback() {
            $(".back").unbind();
        }
        //要显示一条通知，你需要先请求适当的权限，然后你可以实例化一个 Notification 实例：
        window.addEventListener('load', function () {
            Notification.requestPermission(function (status) {
                // 这将使我们能在 Chrome/Safari 中使用 Notification.permission
                if (Notification.permission !== status) {
                    Notification.permission = status;
                }
            });
        });

        function deskNotify() {
            var opts = { dir: "ltr", lang: "utf-8", body: "this is test", icon: "http://xuhong.github.io/images/gravatar.png" };// tag: "",icon: ""
            // Let's check if the browser supports notifications
            if (!("Notification" in window)) {
                alert("This browser does not support desktop notification");
            }
            // Let's check if the user is okay to get some notification
            else if (Notification.permission === "granted") {
                // If it's okay let's create a notification
                var n = new Notification("Hi there!", opts);
                n.onshow = function () {
                    console.log("You got me!");
                };
                n.onclick = function () {
                    alert("You clicked me!");
                };
                n.onclose = function () {
                    console.log("notification closed!");
                };
                n.onerror = function () {
                    console.log("An error accured");
                }
            }
            // Otherwise, we need to ask the user for permission
            else if (Notification.permission !== 'denied') {
                Notification.requestPermission(function (permission) {
                    // If the user is okay, let's create a notification
                    if (permission === "granted") {
                        var notification = new Notification("Hi there!");
                    }
                });
            }
        }
    </script>
    <script type="text/javascript">

        $("#img").on("click", function () {
            if ($(this).hasClass("hover")) {
                $(this).removeClass("hover")
            } else {;
                $(this).addClass("hover");
            }
        });
        function fun(n, o) {
            console.log(o)
            return {
                fun: function (m) {
                    return fun(m, n);
                }
            };
        }

        var array1 = ["M", "L", "XL", "2XL", "3Xl"];
        var array2 = ["红色", "白色", "绿色"];

        var b = [];
        for (var i = 0; i < array1.length; i++) {
            for (var k = 0; k < array2.length; k++) {
                b.push({ "size": array1[i], "color": array2[k] });
            }
        }
        console.log(JSON.stringify(b));
        /*jQuery touch事件补充*/
        //(function ($) {
        //    //function isObject(value) { return value instanceof Object }
        //    //function eachEvent(events, fn, iterator) {
        //    //    if (isObject(events)) $.each(events, iterator)
        //    //    else events.split(/\s/).forEach(function (type) { iterator(type, fn) })
        //    //}
        //    //function parse(event) {
        //    //    var parts = ('' + event).split('.')
        //    //    return { e: parts[0], ns: parts.slice(1).sort().join(' ') }
        //    //}
        //    //function add(element, events, fn, selector, getDelegate, capture) {
        //    //    capture = !!capture;

        //    //    function zid(element) {
        //    //        return element._zid || (element._zid = _zid++)
        //    //    }
        //    //    var id = zid(element), handlers = {}, _zid = 1;
        //    //    var set = (handlers[id] || (handlers[id] = []))
        //    //    eachEvent(events, fn, function (event, fn) {
        //    //        var delegate = getDelegate && getDelegate(fn, event),
        //    //          callback = delegate || fn
        //    //        var proxyfn = function (event) {
        //    //            var result = callback.apply(element, [event].concat(event.data))
        //    //            if (result === false) event.preventDefault()
        //    //            return result
        //    //        }
        //    //        var handler = $.extend(parse(event), { fn: fn, proxy: proxyfn, sel: selector, del: delegate, i: set.length })
        //    //        set.push(handler)
        //    //        element.addEventListener(handler.e, proxyfn, capture)
        //    //    })
        //    //}
        //    var touch = {}, touchTimeout
        //    function parentIfText(node) {
        //        return 'tagName' in node ? node : node.parentNode
        //    }
        //    function swipeDirection(x1, x2, y1, y2) {
        //        var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)
        //        return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
        //    }
        //    var longTapDelay = 750, longTapTimeout
        //    function longTap() {
        //        longTapTimeout = null
        //        if (touch.last) {
        //            touch.el.trigger('longTap')
        //            touch = {}
        //        }
        //    }
        //    function cancelLongTap() {
        //        if (longTapTimeout) clearTimeout(longTapTimeout)
        //        longTapTimeout = null
        //    }
        //    $(document).ready(function () {
        //        var now, delta
        //        $(document.body).bind('touchstart', function (e) {
        //            now = Date.now()
        //            delta = now - (touch.last || now)
        //            touch.el = $(parentIfText(e.originalEvent.touches[0].target))
        //            touchTimeout && clearTimeout(touchTimeout)
        //            touch.x1 = e.originalEvent.touches[0].pageX
        //            touch.y1 = e.originalEvent.touches[0].pageY
        //            if (delta > 0 && delta <= 250) touch.isDoubleTap = true
        //            touch.last = now
        //            longTapTimeout = setTimeout(longTap, longTapDelay)
        //        }).bind('touchmove', function (e) {
        //            cancelLongTap()
        //            touch.x2 = e.originalEvent.touches[0].pageX
        //            touch.y2 = e.originalEvent.touches[0].pageY
        //        }).bind('touchend', function (e) {
        //            cancelLongTap()
        //            // double tap (tapped twice within 250ms)
        //            if (touch.isDoubleTap) {
        //                touch.el.trigger('doubleTap')
        //                touch = {}
        //                // swipe
        //            } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
        //                       (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) {
        //                touch.el.trigger('swipe') &&
        //                  touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
        //                touch = {}
        //                // normal tap
        //            } else if ('last' in touch) {
        //                touch.el.trigger('tap')
        //                touchTimeout = setTimeout(function () {
        //                    touchTimeout = null
        //                    touch.el.trigger('singleTap')
        //                    touch = {}
        //                }, 250)
        //            }
        //        }).bind('touchcancel', function () {
        //            if (touchTimeout) clearTimeout(touchTimeout)
        //            if (longTapTimeout) clearTimeout(longTapTimeout)
        //            longTapTimeout = touchTimeout = null
        //            touch = {}
        //        })
        //    })
        //    ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function (m) {
        //        $.fn[m] = function (callback) { return this.bind(m, callback) }
        //    })
        //})(jQuery);
    </script>
    <script>
        //(function (w) {
        //    function Touch(element, callback) {
        //        // touch move listener
        //        function touchStart(event) {
        //            //event.preventDefault();
        //            if (element || ! event.touches.length) return;
        //            var touch = event.targetTouches[0];
        //        }
        //        // touch move listener
        //        function touchMove(event) {
        //            //event.preventDefault();
        //            var touch = event.targetTouches[0];
        //            return callback.call(callback, touch);
        //        }
        //        // touch end listener
        //        function touchEnd(event) {
        //            //event.preventDefault();
        //            var touch = event.targetTouches[0];
        //            if (element || ! event.touches.length) return;
        //            return callback.call(callback, touch);

        //        }

        //        // add touch start listener
        //        element.addEventListener('touchstart', touchStart);
        //        element.addEventListener('touchend', touchEnd);
        //        element.addEventListener('touchmove', touchMove);
        //        element.addEventListener('mousedown', touchStart);
        //        element.addEventListener('mouseup', touchEnd);
        //        element.addEventListener('mousemove', touchMove);
        //    }
        //    w.touch = Touch;
        //})(window);



        //var navTop = $(".nav").offset().top;
        //touch(window, function (e) {
        //    console.log(e);
        //    var x = e.pageX;
        //    var y = e.pageY;
        //    if (y >= Math.abs(navTop)) {
        //        $(".nav").css({ "position": "fixed", "top": "0", "left": "0" });
        //    } else {
        //        $(".nav").attr("style", "");
        //    }
        //    var _x = e.pageX - e.clientX, _y = e.pageY - e.clientY;

        //    $("#move").html("_x:" + _x + "   _y:" + _y + "   x:" + x + "  y:" + y);
        //    $("#navigation").css({ "position": "absolute", "left": _x + "px", "top": _y + "px" });

        //    console.log("x:" + x + " ---  y:" + y);
        //});

        document.body.addEventListener('touchstart', function () { /*...空函数即可*/ });
        var nav_top = $("#navigation").offset().top;
        $(window).on("touchmove scroll", function (event) {
            ////console.log(event);
            //if (event.originalEvent.touches) {
            //    var e = event.originalEvent.touches[0];
            //    //console.log(e);
            //    var x = e.clientX, y = e.clientY;
            //    var _x = e.pageX - x, _y = e.pageY - y;

            //    $("#move").html("_x:" + _x + "   _y:" + _y + "   x:" + x + "  y:" + y);
            //    _y >= Math.abs(nav_top) ? $("#navigation").addClass("fixed") : $("#navigation").removeClass("fixed");

            //    //$("#navigation").css({ "position": "absolute", "left": _x + "px", "top": _y + "px" });
            //} else {
            //    var _top = $(this).scrollTop();
            //    $("#move").html("scrollTop:" + _top);
            //    _top >= Math.abs(nav_top) ? $("#navigation").addClass("fixed") : $("#navigation").removeClass("fixed");
            //}

            var _top = $(this).scrollTop();
            $("#move").html("scrollTop:" + _top + " nav_top:" + nav_top);
            _top >= Math.abs(nav_top) ? $("#navigation").addClass("fixed") : $("#navigation").removeClass("fixed");
        })

    </script>
    <script type="text/javascript">

        var idx = 1, z = 1;
        function GetData() {
            if (idx >= 5) { console.log("第5页 结束"); return; }

            var Product = [];
            for (var i = 0; i < (idx * 6) ; i++) {
                var title = z + " - Apple iPhone 6s (A1700) 128G 金色 移动联通电信4G手机";
                var data = { Title: title, Images: "images/1.jpg", Price: "5988.00" };
                Product.push(data);
                z++;
            }
            idx++;
            return Product;
        };

        $(window).on("touchmove scroll", function (event) {
            var top = $(".pro-item").offset().top + $(".pro-item").height();
            var maxtop=$(window).scrollTop() + $(window).height();
            //console.log("top:" + top + "    ---    scrollTop:" + $(window).scrollTop()+" -----maxtop:"+maxtop);
            if (top - 100 < maxtop) {
                Init();
                console.log("加载第" + idx + "页数内容");
            }
        })

        function Init() {
            var data = GetData();
            var t = $("#layout").val();
            for (var item in data) {
                var html = [];
                html.push('<div class="pro-list ' + t + '">');
                html.push('<a href="javascript:;">');
                html.push('<div class="pro-img"><img src="images/1.jpg" class="max-img"/></div>');
                html.push('<div class="pro-info">');
                html.push('<div class="pro-title">'+data[item].Title+'</div>');
                html.push('<div class="pro-price">￥<label>5988.00</label></div>');
                html.push('</div>');
                html.push('</a>');
                html.push('</div>');
                $(".pro-item").append(html.join(''));
            }
        }
        Init();

        function Layout(t) {
            if (t == "list") {
                $(".pro-list").addClass("list");
                $("#layout").val("list");
            } else {
                $(".pro-list").removeClass("list");
                $("#layout").val("grid");
            }
        }
    </script>
    <script type="text/javascript">
        (function (w) {
            if (!$) return;
            var box = {
                open: function (o, x, fn) {
                    var self = $("#" + o);
                    this.init(o, x, fn);
                    self.fadeIn(500, function () {
                        if (fn && typeof (fn) === "function") { fn(); }
                    });
                },
                close: function (o, x, fn) {
                    var self = $("#" + o);
                    self.fadeOut(500, function () {
                        if (fn && typeof (fn) === "function") { fn(); }
                        //$(document.body).css("overflow", "visible");
                    });
                    if ($('#box_overlay')[0]) { $('#box_overlay').fadeOut(650, function () { $(this).remove(); }); }
                },
                init: function (o,x, fn) {
                    var self = $("#" + o);
                    var w = $(window).width(), h = $(window).height();
                    var bw = self.outerWidth(), bh = self.outerHeight();
                    var _top = ((h / 2 - bh / 2) - 20);
                    var boxCss = { "left": ((w / 2 - bw / 2) + "px"), "top": ((_top > 0 ? _top : 0) + "px"), "z-index": "99", "position": "fixed" };
                    self.css(boxCss);
                    //$(document.body).css("overflow", "hidden");
                    try {
                        if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
                            self.css("position", "absolute"); location.href = location.href.search(/\?/) > 0 ? location.href.substring(0, location.href.indexOf('#')) : location.href + "#";
                        }
                        if ((window.innerHeight - 40) <= self.height()) {
                            self.css({ "position": "absolute", "top": (40 + window.scrollY) });
                        }
                    } catch (e) { }
                    if (!!x && !$("#box_overlay")[0]) {
                        var boxBg = "<div id=\"box_overlay\" style=\"position:absolute;background-color:#000;filter:alpha(opacity=50);opacity:0.5;width:100%;left:0;top:0;z-index:98;border:none;display:none\"></div>";
                        $(boxBg).click(function () { $.closeBox(o, x); }).height($(document).height()).appendTo(document.body).fadeIn();
                    }
                    $(window).resize(function () {
                        if (self.css("display") == "block") {
                            $('#box_overlay').remove(); this.init(o, x);
                        }
                    });
                }
            };
            window.box = box;
        })(window);
    </script>
</body>
</html>
